<h4>Friends</h4>
<div class="infoBlock" id="friendList">
	<ul>
        {% if friends %}
           {% for friend in friends %}
		        <li>
		            <a href="javascript:;" onclick="deleteFriend('{{friend.friendEmail}}')">
		            <img src="/images/delete.png" style="float:right;margin-top:4px;border:none" title="delete your friend">
		            </a>
		            <img src="http://www.noisewater.net/thumbnail/thewattz"> &nbsp; 
		            <span>{{friend.friendNickname}}</span>
		        </li>	               
           {% endfor %}
        {% else %}
                <li>
                    Add some friends!<br> click on 'Add a Friend'
                </li>
        {% endif %}
	</ul>
</div>

<h4 style="margin-top:8px">Pending Friends</h4>
<p style="font-size:11px">
    click: approve <img src="/images/bullet_green.png" style="margin-top:-2px"> or
    remove <img src="/images/bullet_red.png" style="margin-top:-2px">
</p>
<div class="infoBlock" class="overflow:hidden">
	<ul>
        {% if pendingfriends %}
           {% for pf in pendingfriends %}
		        <li style="margin:0;margin-bottom:3px;font-size:12px">
		            <a href="javascript:;" title="Click to approve friend" onclick="approveFriend('{{pf.email}}')">
                        <img src="/images/bullet_green.png" style="float:left;margin-top:-2px;border:none">
                    </a>
                    <a href="javascript:;" title="Click to remove friend" onclick="disapproveFriend('{{pf.email}}')">
                        <img src="/images/bullet_red.png" style="float:left;margin-top:-2px;border:none">
                    </a>
		            <span title="{{pf.email}}">{{pf.email}}</span>
		        </li>	               
           {% endfor %}
        {% else %}
                <li>
                    No friend request at this time
                </li>
        {% endif %}
	</ul>
</div>


<h4 style="margin-top:10px;cursor:pointer" onclick="Effect.toggle('friendAdd', 'blind', {duration:.5})">
    <img src="/images/user_add.png" style="float:right;margin-top:-2px">Add a Friend
</h4>
<div class="infoBlock" id="friendAdd" style="display:block">
	<form action="/friends/add" method="post">
		<dl>
			<dt style="margin-top:0"><label for="friendname">Friend's Name:</label></dt>
			<dd><input type="text" name="friendname" id="friendname"></dd>
			{% if friendErrorName %} 
				<dd style="text-align:center;color:red;margin-top:4px;margin-bottom:4px;font-size:12px">{{friendErrorName}}</dd>
			{% endif %}
			
			<dt><label for="emailaddress">Friend's Email:</label></dt>
			<dd><input type="text" name="friendemail" id="friendemail"></dd>
			{% if friendErrorEmail %} 
				<dd style="text-align:center;color:red;margin-top:4px;margin-bottom:4px;font-size:12px">{{friendErrorEmail}}</dd>
			{% endif %}
			
			<dt style="text-align:right"><input type="submit" name="submit" id="submit" value="add friend"></dt>
		</dl>			
	</form>
</div>